<script setup>
import { onMounted, ref, watch } from "vue";
import "@material/web/checkbox/checkbox.js";

const model = defineModel({ default: false });
const checkbox = ref(null);

watch(() => model.value, model => {
  checkbox.value.checked = !!model;
});

onMounted(() => {
  checkbox.value.checked = !!model.value;
});
</script>

<template>
  <md-checkbox ref="checkbox" touch-target="wrapper" @change="model = checkbox.checked"></md-checkbox>
</template>